import React, {Component} from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
import {TestCase, TestSuite} from '@rnoh/testerino';

export default class ProgressBarScreen extends Component {
  state = {
    progresses: [0, 0, 0, 0],
  };

  componentDidMount() {
    this.startProgress(0, 45);
    this.startProgress(1, 25);
    this.startProgress(2, 70);
    this.startProgress(3, 15);
  }

  elements = new Array(4);

  startProgress(index: number, stepSize: number) {
    const {progresses} = this.state;
    progresses[index] = Math.min(progresses[index] + stepSize, 100);
    this.setState({progresses});

    if (progresses[index] < 100) {
      setTimeout(() => {
        this.startProgress(index, stepSize);
      }, 800);
    }
  }

  get customElement() {
    return (
      <View
        style={{
          backgroundColor: Colors.green30,
          borderWidth: 0.5,
          borderRadius: 4,
        }}
      />
    );
  }

  render() {
    const {progresses} = this.state;

    return (
      <TestSuite name="ProgressBar">
        <TestCase itShould="例子:">
          <View padding-20>
            <ScrollView>
              <View flex bg-$backgroundNeutralLight spread paddingV-18>
                <View paddingL-18 marginB-18>
                  <Text $textDefault text40>
                    ProgressBar
                  </Text>
                </View>

                <Text $textDefault text70 style={styles.text}>
                  Default
                </Text>
                <ProgressBar
                  progress={progresses[0]}
                  style={styles.progressBar}
                />

                <Text $textDefault text70 style={styles.text}>
                  FullWidth
                </Text>
                <ProgressBar
                  progress={progresses[1]}
                  style={styles.fullWidthProgressBar}
                  fullWidth
                />

                <Text $textDefault text70 style={styles.text}>
                  Styled
                </Text>
                <ProgressBar
                  progress={progresses[2]}
                  style={[styles.progressBar, styles.styledProgressBar]}
                  progressColor={Colors.purple70}
                />

                <Text $textDefault text70 style={styles.text}>
                  Custom Element
                </Text>
                <ProgressBar
                  progress={progresses[0]}
                  style={styles.progressBar}
                  customElement={this.customElement}
                />
              </View>
            </ScrollView>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    paddingTop: 20,
    paddingBottom: 15,
    paddingLeft: 20,
  },
  progressBar: {
    marginBottom: 10,
    marginHorizontal: Spacings.s4,
  },
  styledProgressBar: {
    backgroundColor: Colors.purple40,
    height: 30,
  },
  fullWidthProgressBar: {
    marginBottom: 10,
  },
});
